<template>
  <div style="z-index: 8">
    <div>
      <x-table :cell-bordered="false" :content-bordered="false"
               style="background-color:#fff;color:white;font-size: 14px;margin-top: 10px;">
        <thead>
        <tr style="color: #000;">
          <th>职业代码</th>
          <th>名称</th>
          <th>类别</th>
          <th>人数</th>
        </tr>
        </thead>
        <tbody style="color:#666">
        <tr class="staffRow" v-for="(item , index) in lists" :key="index" v-if="lists.length > 0"
            @click="selectRow(index)">
          <td>{{item.occupationCode}}</td>
          <td>{{item.name}}</td>
          <td>{{item.kind}}</td>
          <td>{{item.occupationNms}}</td>
        </tr>
        </tbody>
      </x-table>
      <p style="text-align: center;color:#666;padding: 11px;margin-bottom: 0"
         @click="addStaffInfo" v-if="showAddBtn">
        <a href="javascript:void(0)" style="text-decoration: none;color:#4a90e2">
          <i class="iconfont icon-addition"></i>
          新增
        </a>
      </p>
    </div>
    <div v-if="inputForm" style="margin-top:10px">
      <group>
        <selector :value-map="['value','text']" direction="rtl" title="职业名称" v-model="form.occupationCode"
                  :options="occupationCodes" @on-change="onVocationChange"></selector>
        <x-input text-align="right" style="padding: 12px 15px;" :readonly="true"
                 type="number" v-model="form.kind" title="职业类别" placeholder="暂无"></x-input>
        <x-input text-align="right" style="padding: 12px 15px;"
                 type="number" v-model="form.occupationNms" @on-blur="onChangeInput" title="职业人数"
                 placeholder="请输入职业人数"></x-input>
      </group>
    </div>
    <div class="padding">
      <div v-if="inputForm">
        <box gap="10px 10px">
          <x-button type="primary" class="positiveBtn" @click.native="addList">保存
          </x-button>
          <x-button type="royal" style="background-color: #F8F8F8;color: #000;" @click.native="cancel">取消
          </x-button>
        </box>
      </div>
    </div>
  </div>
</template>
<script>
  import {Group, Selector, XInput, Box, XButton, Cell, XTable} from 'Vux'
  export default {
    props: {
      insuredNms: String,
      visible: Boolean,
      vocations: Array
    },
    components: {
      Group,
      Selector,
      XInput,
      Box,
      XButton,
      Cell,
      XTable
    },
    data(){
      return {
        form: {
          name: "",
          kind: "",
          occupationNms: "",
          occupationCode: ""
        },
        occupationCodes: [],
        ableSaveFlag: false,
        inputForm: false,
        lists: [...this.vocations],
        ios: true,
        blankForm: ['职业名称', '职业类别', '职业人数'],
        showAddBtn: true
      }
    },
    methods: {
      //校验规则
      //选择单条行业信息
      selectRow(index){
        if (this.$store.state.app.schemes.length > 0) {
          let phoneType = this.ios ? 'ios' : 'android';
          let thus = this;
          this.$vux.confirm.show({
            theme: phoneType,
            title: '提示',
            content: '删除会影响后续职业相关类',
            confirmText: '继续',
            cancelText: '取消',
            onCancel () {
              thus.$vux.confirm.hide()
            },
            onConfirm () {
              thus.$store.commit("REMOVE_VOCATION_KIND", thus.lists[index]);
              thus.$store.commit("INIT_VOCATION_ABOUT");
              thus.$emit("clearSchemes");
              thus.lists.splice(index, 1);
              thus.$emit("updateVocations", thus.lists)
            }
          })
        } else {
          let phoneType = this.ios ? 'ios' : 'android';
          let thus = this;
          this.$vux.confirm.show({
            theme: phoneType,
            title: '提示',
            content: '删除'+thus.lists[index].name+'相关职业信息',
            confirmText: '继续',
            cancelText: '取消',
            onCancel () {
              thus.$vux.confirm.hide();
              console.log(phoneType)
            },
            onConfirm () {
              thus.$store.commit("REMOVE_VOCATION_KIND", thus.lists[index]);
              thus.lists.splice(index, 1);
              thus.$emit("updateVocations", thus.lists)
            }
          })
        }
      },
      //增加职业信息
      addStaffInfo(){
        this.showAddBtn = false;
        this.inputForm = true;
        this.form = {
          name: "",
          kind: "",
          occupationNms: "",
          occupationCode: ""
        };
      },
      //保存职业信息
      addList(){
        if (this.ableSaveFlag) {
          let nums = null;
          if (this.lists.length > 0) {
            let ary = [this.form.occupationNms];
            for (let i = 0; i < this.lists.length; i++) {
              ary.push(this.lists[i].occupationNms);
              if (this.form.occupationCode === this.lists[i].occupationCode) {
                this.$emit('error', '请勿重复添加');
                this.form = {
                  name: "",
                  kind: "",
                  occupationNms: "",
                  occupationCode: "",
                };
                return
              }
              nums = eval(ary.join('+'));
            }
          } else {
            nums = this.form.occupationNms;
          }
          if (nums > this.insuredNms) {
            this.$emit('error', '人数总和超过准备参保人数')
          } else {
            this.lists.push(this.form);
            this.$store.commit('SAVE_PREV_VOCATION_KIND', {
              text: this.form.kind + '-' + this.form.name,
              value: this.form.kind,
            });
            this.inputForm = false;
            this.$emit("updateVocations", this.lists);
            this.showAddBtn = true;
          }
        } else {
          this.$emit('error', '请先填写' + this.blankForm[0])
        }
      },
      //取消
      cancel(){
        this.showAddBtn = true;
        this.inputForm = false
      },
      //选择职业
      onVocationChange(value){
        for (let i = 0; i < this.occupationCodes.length; i++) {
          if (value === this.occupationCodes[i].value) {
            this.form.name = this.occupationCodes[i].name;
            this.form.kind = this.occupationCodes[i].occupationLvl;
            this.form.occupationCode = this.occupationCodes[i].value;
          }
        }
      },
      onChangeInput(value){
        if (Number(value) === 0) {
          this.$emit('error', '职业人数不得低于1人');
          this.form.occupationNms = "";
        } else {
          this.form.occupationNms = Math.round(value)
        }
      }
    },
    watch: {
      form: {
        handler(){
          let ary = Object.keys(this.form);
          let flag = false;
          let blankForm = [];
          let formTxts = ['职业名称', '职业类别', '职业人数'];
          for (let i = 0; i < ary.length; i++) {
            if (this.form[ary[i]] === "" || this.form[ary[i]].length === 0) {
              flag = true;
              blankForm.push(formTxts[i])
            }
          }
          this.blankForm = blankForm;
          this.ableSaveFlag = !flag;
        },
        deep: true
      }
    },
    mounted(){
      if (this.$store.state.app.vocationsInfos) {
        let occupationCodes = this.$store.state.app.vocationsInfos.child[0].occupationType;
        let array = [];
        for (let i = 0; i < occupationCodes.length; i++) {
          array.push({
            occupationLvl: occupationCodes[i].occupationLvl,
            name: occupationCodes[i].text,
            text: occupationCodes[i].occupationLvl + '-' + occupationCodes[i].text,
            value: occupationCodes[i].value
          })
        }
        this.occupationCodes = array;
        this.ios = this.$store.state.app.ios;
        console.log(this)
      }
    }
  }
</script>
<style scoped>
  .staffRow td {
    padding: 5px 0;
  }
</style>
